<template>
	<uni-popup ref="receive" type="bottom" :is-mask-click ="true" @close="disPopUp" @maskClick="disPopUp">
		<view class="privacy-box">
			<template v-if="unshippItems.length > 0">
				<view class="privacy-title">未发货</view>
				<view class="privacy-sub-title">以下商品未发货，无法确认收货</view>
				<view class="privacy-body">
					<view class="ship-items">
						<view class="ship-item flex-center" v-for="item in unshippItems" :key="item.id">
							<image class="pic" :src="item.goods_thumbnail" mode=""></image>
							<view class="ship-item-con">
								<view class="ship-item-txt txt1">{{item.goods_title}}</view>
								<view class="ship-item-txt txt2">{{item.sku_name}}</view>
							</view>
							<view class="ship-item-num">
								x{{item.qty - item.refund_qty}}
							</view>
						</view>
					</view>
				</view>
				<view class="privacy-foot flex">
					<view class="privacy-btn active w100" @click="disPopUp">关闭</view>
				</view>
			</template>
			<template v-else-if="shipInfos.length > 0">
				<view class="privacy-title">确认收货</view>
				<view class="privacy-sub-title">以下快递还未签收，是否确认收货？</view>
				<view class="privacy-body" >
					<view class="ships" v-for="shipInfo in shipInfos" :key="shipInfo.shipping_no">
						<view class="ship-head flex">
							<view class="flex-center">
								<view class="ship-txt1 mr10">{{shipInfo.shipping_company}}</view>
								<view class="ship-txt2 mr10">{{shipInfo.shipping_no}}</view>
							</view>
							<view class="ship-txt3">{{statusMap[shipInfo.status]}}</view>
						</view>
						<view class="ship-content" v-if="shipInfo.list.length > 0">
							{{shipInfo.list[0].context}}
						</view>
						<view v-else class="ship-content">
							暂时无法查询到物流信息
						</view>
					</view>
				</view>
				<view class="privacy-foot flex">
					<view class="privacy-btn grey" @click="disPopUp">取消</view>
					<view class="privacy-btn active" @click="handleAgree">确定</view>
				</view>
			</template>
			<template v-else-if="orderInfo">
				<view class="privacy-title">请确认已收到商品并检查无误</view>
				<view class="privacy-body" >
					<view class="list">
						<view class="title">订单金额</view>
						<view class="detail" style="font-size: 36rpx;font-weight: bold;">¥{{((orderInfo.amount - orderInfo.refund_amount + orderInfo.shipping_amount) / 100).toFixed(2)}}</view>
					</view>
					<view class="list">
						<view class="title">商品信息</view>
						<view class="detail">{{getTitle(orderInfo.items)}}</view>
					</view>
					<view class="list">
						<view class="title">交易单号</view>
						<view class="detail">{{orderInfo.order_no}}</view>
					</view>
					<view class="list">
						<view class="title">支付时间</view>
						<view class="detail"><uni-dateformat :date="orderInfo.created_at"></uni-dateformat></view>
					</view>
					<view class="list" style="margin-bottom: 0;">
						<view class="title">发货方式</view>
						<view class="detail">{{(orderInfo.shipping_type == 2 || orderInfo.shipping_company == '自提') ? '用户自提':'快递'}}</view>
					</view>
				</view>
				<view class="privacy-foot flex">
					<view class="privacy-btn active w100" @click="handleAgree">确定收货</view>
				</view>
			</template>	
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'confirm-receipt',
		data() {
			return {
				statusMap: {
					0: '在途',
					1: '揽收',
					2: '疑难',
					3: '签收',
					4: '退签',
					5: '派件',
					8: '清关',
					14: '拒签'
				},
				orderInfo: null
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: null
			},
			shipInfos:{
				type: Array,
				default: []
			},
			unshippItems:{
				type: Array,
				default: []
			},
		},
		watch: {
			value(nVal, oVal) {
				if (nVal) {
					this.$refs.receive.open()
					this.orderInfo = this.item;
				};
			}
		},
		methods: {
			handleAgree(e) {
				this.$emit('confirmOrderFunc');
				this.disPopUp()
			},
			disPopUp() {
				this.$refs.receive.close();
				this.orderInfo = null;
				this.$emit('closeConfirm')
			},
			getTitle(arr) {
				let str = [];
				arr.map(item => {
					str.push(item.goods_title)
				})
				return str.join('、')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.privacy-box {
		width: 100%;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 50rpx 40rpx 180rpx 40rpx;
		position: fixed;
		bottom: -100rpx;
		left: 0;
		.privacy-title {
			color: #181127;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 56rpx;
			margin-bottom: 10rpx;
			width: 100%;
			text-align: center;
		}
		.privacy-sub-title {
			color: #2e2e2e;
			font-size: 28rpx;
			line-height: 44rpx;
			width: 100%;
			text-align: center;
		}
		.flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.flex-center {
			display: flex;
			align-items: center;
		}
		.mr10 {
			margin-right: 15rpx;
		}
		.privacy-body {
			width: 100%;
			margin-top: 50rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 25rpx 30rpx;
			box-sizing: border-box;
			.ship-items {
				width: 100%;
				.ship-item {
					width: 100%;
					margin-bottom: 24rpx;
					.pic {
						width: 85rpx;
						height: 68rpx;
						border-radius: 6rpx;
						margin-right: 14rpx;
					}
					.ship-item-con {
						flex: 1;
						overflow: auto;
					}
					.ship-item-txt {
						line-height: 34rpx;
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						&.txt1 {
							color: #2e2e2e;
						}
						&.txt2 {
							color: #979797;
						}
					}
					.ship-item-num {
						font-size: 28rpx;
						color: #979797;
					}
				}
			}
			.ships {
				width: 100%;
				margin-bottom: 34rpx;
			}
			.ship-head {
				height: 44rpx;
				margin-bottom: 4rpx;
			}
			.ship-txt1 {
				color: #2e2e2e;
				font-size: 28rpx;
				line-height: 44rpx;
			}
			.ship-txt2 {
				color: #969697;
				font-size: 28rpx;
				line-height: 44rpx;
			}
			.ship-txt3 {
				color: #F97028;
				font-size: 28rpx;
				line-height: 44rpx;
			}
			.ship-content {
				color: #969799;
				font-size: 28rpx;
				line-height: 44rpx;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical 
			}
			
			.list {
				width: 100%;
				display: flex;
				align-items: flex-start;
				margin-bottom: 24rpx;
			}
			.title {
				color: #979696;
				font-size: 28rpx;
				line-height: 44rpx;
				width: 150rpx;
				&.active {
					color: #07c160;
				}
			}
			.detail {
				color: #2e2e2e;
				font-size: 28rpx;
				line-height: 44rpx;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical 
			}
		}
		.privacy-foot {
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			margin-top: 50rpx;
			.privacy-btn {
				width: 320rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 36rpx;
				font-size: 28rpx;
				position: relative;
				text-align: center;
				&.active {
					color: #30240A;
					background: linear-gradient(97deg, #FADF5D 19%, #F7D35D 80%);
				}
				&.grey {
					background: #989898;
					color: #fff;
				}
				&.w100 {
					width: 100%;
				}
			}
		}
	}
</style>